// 引入
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin');

// webpack 中的所有的配置信息都应该写在下面
module.exports = {
  // 入口主件
  entry: "/src/index.ts",
  // 指定打包文件目录
  output: {
    path: path.resolve(__dirname, "dist"),
    // 打包后的文件名
    filename: "bundle.js",
    environment: {
      // 默认不使用箭头函数
      arrowFunction: false,
      const: false
    }
  },
  // 指定webpack打包时要使用的模块
  module: {
    rules: [
      {
        // 指定规则生效的文件
        // 指定ts文件用ts-loader编译
        test: /\.ts$/,
        use: 'ts-loader',
        // 要排除的文件
        exclude: /node-modules/
      },
      // 设置less文件
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      browers: 'last 2 versions'
                    }
                  ]
                ]
              }
            }
          },
          "less-loader"
        ]

      }
    ]
  },
  mode: 'production',
  plugins: [
    new HTMLWebpackPlugin({
      // title: "这是一个自定义的title"
      template: "./src/index.html"
    }),
  ],

  resolve: {
    extensions: ['.ts', '.js']
  }
}